<template>
	<div>
    我是子生命周期
    <input type="text" :value="modelValue" @input="updateModelValue" />
    <button @click="stopWatch">停止监听</button>
  </div>
</template>
<!-- <script>
export default {
	data() {},
  props: {
    modelValue: {
      type: Number,
      default: 0
    }
  },
	beforeCreate() {
    console.log("子生命周期：beforeCreate");
  },
	created() {
    console.log("子生命周期：created");
  },
	beforeMount() {
    console.log("子生命周期：beforeMount");
  },
	mounted() {
    console.log("子生命周期：mounted");
  },
	beforeUpdate() {
    console.log("子生命周期：beforeUpdate");
  },
	updated() {
    console.log("子生命周期：updated");
  },
	beforeUnmount() {
    console.log("子生命周期：beforeUnmount");
  },
	unmounted() {
    console.log("子生命周期：unmounted");
  },
  methods: {
    updateModelValue(e) {
      this.$emit("update:modelValue", e.target.value);
    }
  }
};
</script> -->
<script setup>
  const props = defineProps({
    modelValue: {
      type: Number,
      default: 0
    }
  });
  const stopWatch = watchEffect((onInvalidate)=>{
    console.log("子生命周期：watchEffect", props.modelValue);
    onInvalidate(()=>{
      console.log("先清除副作用----,再打印");
    })
  })
  onBeforeMount(()=>{
    console.log("子生命周期：beforeMount");
  })
  onMounted(()=>{
    console.log("子生命周期：mounted");
  })
  onBeforeUpdate(()=>{
    console.log("子生命周期：beforeUpdate");
  })
  onUpdated(()=>{
    console.log("子生命周期：updated");
  })
  onBeforeUnmount(()=>{
    console.log("子生命周期：beforeUnmount");
  })
  onUnmounted(()=>{
    console.log("子生命周期：unmounted");
  })

  const $emit = defineEmits(["update:modelValue"]);

  function updateModelValue(e) {
    // throw new Error("Function not implemented.");
    $emit("update:modelValue", e.target.value);
  } 
</script>